<html>
<head>
    <meta charset="utf-8">
    <script src="vue.3.0.0-beta.17.js"></script>
    <style>
        .container {
            width: 360px;
            font-size: 12px;
            display: flex;
            flex-direction: column;
        }

        input {
            width: 50%;
            height: 24px;
            margin-bottom: 12px;
        }

        button {
            height: 24px;
            width: 120px;
            margin-bottom: 24px;
        }
    </style>
</head>
<body>
<div id="app" class="container">
    firstName:
    <input v-model="firstName"/>
    lastName:
    <input v-model="lastName"/>
    fullName:
    <!--    <span>{{fullName}}</span>-->
    <input v-model="fullName">
</div>
<script>
    const {createApp, ref, watch, reactive, computed} = Vue
    let firstName = ref('first')
    let lastName = ref('last')

    const app = {
        setup() {
            const fullName = computed({
                get() {
                    return firstName.value + ' ' + lastName.value
                },
                // 可重新对计算属性进行赋值计算
                set(val) {
                    const names = val.split(' ')
                    firstName.value = names[0]
                    lastName.value = names[names.length - 1]
                }
            })
            return {
                firstName,
                lastName,
                fullName
            }
        }
    }
    createApp(app).mount('#app')
</script>
</body>
</html>
